<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="src/css/scojs.css" rel="stylesheet">
    <link href="src/css/colpick.css" rel="stylesheet">
    <link href="src/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="src/css/main.css">
    <!--<link rel="stylesheet" href="../dist/css/danmuplayer.css">-->
    <style>
        .Dplayer_danmu {
            width: 300px;
            height: 520px;
        }

        .Dplayer_watching {
            width: 100%;
            height: 60px;
            line-height: 60px;
            display: inline-block;
            font-size: 12px;
            color: #99a2aa;
            box-shadow: #ddd 0 0 5px
        }


        .Dplayer-watching-number {
            margin-left: 20px;
            font-size: 18px;
            font-weight: 700;
            color: #222;
            padding: 0
        }


        .Dplayer_list {
            width: 100%;
            height: 30px;
            overflow: hidden;
            padding: 0px;
        }


        .Dplayer_list li {
            width: 60px;
            height: 30px;
            float: left;
            color: #99a2aa;
            font-size: 12px;
            text-align: center;
            line-height: 30px;
            list-style: none;


        }


        .Dplayer_list li:nth-child(1) {
            width: 60px !important
        }


        .Dplayer_list li:nth-child(2) {
            width: 120px !important
        }

        .Dplayer_list li:nth-child(3) {
            width: 120px !important
        }

        .list_ovefiow {
            width: 100%;
            height: 363px;
            overflow: auto;
            padding: 0px;
        }

        .like {
            font-size: 55px;
            color: #ccc;
            cursor: pointer;
        }

        .cs {
            color: #f00;
        }

        .saveCoin{
            display: none;
        }

    </style>
</head>
<body>
<div style="margin-left: 20%; margin-top: 100px;">
    <div id="danmup" style="float: left;">
    </div>
    <div class="Dplayer_danmu" style="float: left; border: 1px red solid;">
        <div class="Dplayer_watching">
            <span class="Dplayer-watching-number" id="Dplayerspan" title="这个数据是假的"></span>
            人正在观看,<span class="danmuku_num">100</span>条弹幕
        </div>

        <ul class="Dplayer_list">
            <li id="time">时间</li>
            <li>发送内容</li>
            <li>用户类型</li>
        </ul>
        <ul class="list_ovefiow">
            <#list danmuList as d>
                <li>
                    <div style="width: 60px;height: 30px;margin-left: 20px;display: inline-block">${d.getTime()}</div>
                    <div style="height: 30px;margin-left: 20px;display: inline-block">${d.getText()}</div>
                </li>
            </#list>
        </ul>
    </div>
    <div style="clear: both"></div>
    <input type="button" value="${great}" id="btn">&nbsp;&nbsp;&nbsp;
    <input type="button" id="collect" value="${msg}"/>
    <div>
        <input type="button" id="coin" value="${coin}"/>
        <input type="button" class="saveCoin" value="1"/>
        <input type="button" class="saveCoin" value="2"/>
    </div>
    <div style="display: none">
        <span class="glyphicon" aria-hidden="false">&#xe072</span>
        <span class="glyphicon" aria-hidden="false">&#xe073</span>
        <span class="glyphicon" aria-hidden="false">&#xe242</span>
        <span class="glyphicon" aria-hidden="false">&#xe115</span>
        <span class="glyphicon" aria-hidden="true">&#xe111</span>
        <span class="glyphicon" aria-hidden="true">&#xe096</span>
        <span class="glyphicon" aria-hidden="true">&#xe097</span>
    </div>

</div>
</body>
<script src="src/js/jquery-2.1.4.min.js"></script>
<script src="src/js/jquery.shCircleLoader.js"></script>
<script src="src/js/sco.tooltip.js"></script>
<script src="src/js/colpick.js"></script>
<script src="src/js/jquery.danmu.js"></script>
<script src="src/js/main.js"></script>
<!--<script src="../dist/js/danmuplayer.min.js"></script>-->
<script>

    $("#danmup").DanmuPlayer({
        src: "${video.getName()}",
        height: "480px", //区域的高度
        width: "800px" //区域的宽度
        , urlToGetDanmu: "findDanmups"
        , urlToPostDanmu: "addDanmup"
    });


    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        //建立连接，这里的/websocket ，是ManagerServlet中开头注解中的那个值
        websocket = new WebSocket("ws://172.16.1.2:8080/websocket");
    } else {
        alert('当前浏览器 Not support websocket')
    }
    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };
    //连接成功建立的回调方法
    websocket.onopen = function (event) {
    };
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        if (event.data != null) {
            var map = eval('(' + event.data + ')');
            var $str = "";
            $str = $str + "<li><div style=\"width: 60px;height: 30px;margin-left: 20px;display: inline-block\">" + map.time + "</div><div style=\"width: 120px;height: 30px;margin-left: 20px;display: inline-block\">" + map.text + "</div></li>"
            $(".list_ovefiow").append($str)
        }
    };
    //连接关闭的回调方法
    websocket.onclose = function () {

    };
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    };

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('Dplayerspan').innerHTML += innerHTML;
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    /*$("#danmup .danmu-div").danmu("addDanmu", [
        {"text": "这是滚动弹幕", color: "white", size: 1, position: 0, time: 2}
        , {"text": "我是帽子绿", color: "green", size: 1, position: 0, time: 3}
        , {"text": "哈哈哈啊哈", color: "black", size: 1, position: 0, time: 10}
        , {"text": "这是顶部弹幕", color: "yellow", size: 1, position: 1, time: 3}
        , {"text": "这是底部弹幕", color: "red", size: 1, position: 2, time: 9}
        , {"text": "大家好，我是伊藤橙", color: "orange", size: 1, position: 1, time: 3}
    ])*/

    //收藏和取消收藏
    $("#collect").click(function () {
        if ($("#collect").val() == "取消收藏") {
            $(function () {
                $.ajax({
                    type: "post",
                    data: {
                        "video":${video.getId()},
                        "uid":1
                    },
                    url: "delCollect",
                    success: function (result) {
                    }
                })
            });
            $("#collect").val("收藏")
        } else {
            $(function () {
                $.ajax({
                    type: "post",
                    data: {
                        "video":${video.getId()},
                        "uid":1
                    },
                    url: "addCollect",
                    success: function (result) {
                    }
                })
            });
            $("#collect").val("取消收藏");
        }
    })

    //点赞和取消点赞
    $("#btn").click(function () {
        if ($("#btn").val()=="取消点赞") {
            alert("取消点赞方法")
            alert(${video.id})
            $.ajax({
                type:"post",
                data:{"id":${video.id},"uid":"1"},
                url:"delLike",
                success:function (data) {
                    if(data=="true"){
                        alert("已取消")
                        $("#btn").val("点赞")
                    }else{
                        alert("取消点赞失败")
                    }
                }
            })

        }else{
            alert("点赞方法");
            $.ajax({
                type:"post",
                data:{id:${video.id},uid:"1"},
                url:"addLike",
                success:function (data) {
                    if(data=="true"){
                        alert("已点赞")
                        $("#btn").val("取消点赞")
                    }else{
                        alert("点赞失败")
                    }
                }
            })
        }
    });


    //投币已投币
    $("#coin").click(function () {
        $(".saveCoin").css({"display":"block"});
        $(".saveCoin").click(function () {
            $(".saveCoin").css({"display":"none"});
            $.ajax({
                type:"post",
                data:{id:${video.id},uid:"1",coin:$(this).val()},
                url:"addCoin",
                success:function (result) {
                    if (result=="succ"){
                        $("#coin").val("已投币");
                        $("#coin").attr("disabled",true);
                        alert("投币成功");
                    } else{
                        alert("投币失败");
                    }
                }
            })
        });
    })

    $(function () {
        if ($("#coin").val()=="已投币"){
            $("#coin").attr("disabled",true);
        }
    })

</script>
</html>